<!-- 268 -->
<template>
  <div>
    <a-space class="common-button-group">
      <a-button
        type="primary"
        :loading="searchBtnLoading"
        @click="getDataList('search')"
        >{{ $t("common_query") }}</a-button
      >
    </a-space>
    <t-query-form
      layout="inline"
      ref="queryForm"
      group="cellPpkWinInfo"
      :model="queryForm"
    >
      <a-row :gutter="[0, 0]">
        <a-col :span="6">
          <a-form-item :label="$t('T9_bayId')" name="bayId" prop="bayId">
            <a-select
              v-model:value="queryForm.bayId"
              class="select-width"
              @change="changeBayId"
              show-search
              allow-clear
            >
              <a-select-option
                v-for="item in bayIdArr"
                :key="item.bayId"
                :value="item.bayId"
              >
                {{ item.bayId }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item
            :label="$t('T9_lineName')"
            name="lineName"
            prop="lineName"
          >
            <a-select
              v-model:value="queryForm.lineName"
              class="select-width"
              @change="changeLineName"
              show-search
              allow-clear
            >
              <a-select-option
                v-for="item in lineNameArr"
                :key="item.lineName"
                :value="item.lineName"
              >
                {{ item.lineName }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="$t('T9_eqpId')" name="eqpId" prop="eqpId">
            <a-select
              v-model:value="queryForm.eqpId"
              class="select-width"
              @change="getPortIdList"
              show-search
              allow-clear
            >
              <a-select-option
                v-for="item in eqpIdArr"
                :key="item.lineName"
                :value="item.lineName"
              >
                {{ item.lineName }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="$t('T9_palletType')" name="palletType">
            <a-select
              v-model:value="queryForm.palletType"
              class="select-width"
              show-search
              allow-clear
            >
              <a-select-option
                v-for="item in palletTypeArr"
                :key="item"
                :value="item"
              >
                {{ item }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="$t('T9_palletId')" name="palletId">
            <a-input v-model:value="queryForm.palletId" allow-clear />
          </a-form-item>
        </a-col>
      </a-row>
    </t-query-form>
    <a-row
      type="flex"
      justify="space-between"
      align="middle"
      class="global-oper-row mt-2"
    >
      <a-col :span="15" class="global-oper-row-title">{{
        $t("T9_cstList")
      }}</a-col>
      <a-col :span="8" class="global-oper-row-extra">
        <a-button @click="getDataList('export')">{{
          $t("t9_toExcel")
        }}</a-button>
      </a-col>
    </a-row>
    <div class="tableArea">
      <t-table :data="table" max-height="100%">
        <t-column field="palletType" :title="$t('T9_palletType')" />
        <t-column field="palletID" :title="$t('T9_palletId')" />
        <t-column field="lineName" :title="$t('T9_lineName')" />
        <t-column field="eqpId" :title="$t('T9_eqpId')" />
        <t-column field="settingCode" :title="$t('T9_settingCode')" />
        <t-column field="position" :title="$t('T9_position')" />
        <t-column field="materialQty" :title="$t('T9_materialQty')" />
        <t-column field="capacity" :title="$t('T9_capacity')" />
        <t-column field="productId" :title="$t('T9_productId')" />
        <t-column field="owner" :title="$t('T9_owner')" />
        <t-column field="palletGrade" :title="$t('T9_palletGrade')" />
        <t-column field="panelQty" :title="$t('T9_panelQty')" />
        <t-column field="cstState" :title="$t('T9_cstState')" />
        <t-column field="cstHoldState" :title="$t('T9_cstHoldState')" />
        <t-column field="cstCleanState" :title="$t('T9_cstCleanState')" />
      </t-table>
    </div>
  </div>
</template>

<script>
  import { defineComponent } from 'vue'
  import moment from 'moment'
  import { getBayId, getLineName, getList } from '@/api/common'
  import { getCurrentDate } from '@/utils/utils'
  import { downloadBlobFile } from '@/utils/download'

  export default defineComponent({
    name: 'CellPpkWinInfo',
    components: {},
    data() {
      return {
        searchBtnLoading: false,
        table: [],
        bayIdArr: [],
        eqpIdArr: [],
        lineNameArr: [],
        palletTypeArr: ['PPK_CSTType_Pallet', 'PPK_CSTType_SpacerCST'],
        queryForm: {
          bayId: '',
          eqpId: '',
          lineName: '',
          palletType: '',
          palletId: ''
        }
      }
    },
    computed: {},
    watch: {},
    created() {
      this.getBayId()
      // this.getOwnerType()
      this.queryForm.Date = [
        moment(getCurrentDate(), 'YYYY-MM-DD HH:mm'),
        moment(getCurrentDate(1), 'YYYY-MM-DD HH:mm')
      ]
    },
    methods: {
      onChange(value, dates) {
        this.queryForm.Date = dates
        console.log('Selected Time: ', this.queryForm.Date[0])
      },
      getDataList(type) {
        const obj = {
          dtoName: 'CellPpkWipInfoDTO',
          cstId: '',
          cstType: '',
          eqId: this.queryForm.eqpId,
          lineName: this.queryForm.lineName,
          positionName: '',
          queryId: 'GetCarrierList',
          version: '80035',
          menuName: 'cellPpkWipInfo',
          usage: 'queryCstList'
        }
        if (type === 'search') {
          obj.export = false
          getList(obj).then((res) => {
            this.table = res
          })
        } else {
          obj.export = true
          getList(obj).then((res) => {
            downloadBlobFile(res, 'cstList')
          })
        }
      },
      changeBayId(val) {
        if (val) {
          this.getLineNameEqId()
        }
      },
      changeLineName(val) {
        if (val) {
          this.getEqpId()
        }
      },
      getBayId() {
        const params = {
          shopId: 'CELL'
        }
        getBayId(params).then((res) => {
          this.bayIdArr = res
        })
      },
      getLineNameEqId() {
        const params = {
          bayId: this.queryForm.bayId,
          shopId: 'CELL',
          detailMachineType: 'MAIN',
          superMachineId: ''
        }

        getLineName(params).then((res) => {
          this.lineNameArr = res
        })
      },
      getEqpId() {
        const obj = {
          bayId: this.queryForm.bayId,
          shopId: 'CELL',
          detailMachineType: 'UNIT',
          superMachineId: this.queryForm.lineName
        }
        getLineName(obj).then((res) => {
          this.eqpIdArr = res
        })
      }
    }
  })
</script>
<style lang="less" scoped>
/deep/ .ant-row,
.ant-row:after,
.ant-row:before {
  display: flex;
  flex: 1;
}
.tableArea {
  width: 100%;
  height: 60vh;
}
</style>
